<template>
  <div class="order-detail">
    <div style="width: 100%;text-align: right;margin-bottom: 20px">
      <el-button @click="back" type="primary">返回</el-button>
    </div>
    <!-- 订单状态进度条 -->
    <el-card class="status-card">
      <el-steps align-center :active="step" finish-status="success">
        <el-step title="待支付"></el-step>
        <el-step title="待发货"></el-step>
        <el-step title="物流配送"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
    </el-card>

    <div class="detail-content">
      <!-- 费用信息 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">订单信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单号">{{ orderDetail.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="支付类型">
            <el-tag v-if="orderDetail.orderType === 'order_top_up'" type="success">余额支付</el-tag>
            <el-tag v-if="orderDetail.orderType === 'top_up'" type="success">预支付</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">{{ orderDetail.amount || 0 }}元</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- 计费明细 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">商品明细</span>
        </div>
        <el-table :data="billingDetails" style="width: 100%" border>

        </el-table>
      </el-card>
      <!-- 用户信息 -->
      <el-card class="info-card">
        <div slot="header">
          <span class="card-title">用户信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户名">{{ orderDetail.nickname}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ orderDetail.mobile }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

    </div>
  </div>
</template>

<script>

import {http} from "@/api";

export default {
  name: 'OrderDetail',
  data() {
    return {
      orderDetail: {},
      step: 0,
      billingDetails: [
      ],
    }
  },
  created() {
    http.order.read({
      orderId: this.$route.params.id
    }).then(res => {
      this.orderDetail = res.data
    })
  },
  methods: {
    formateTime(minutes) {
      if (!minutes) return 0
      if (minutes < 60) {
        return  minutes + '分钟'
      }

      var hours = Math.floor(minutes / 60);
      var remainingMinutes = minutes % 60;
      return hours + "时" + remainingMinutes + "分";
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  background-color: #f5f7fa;
  .status-card {
    margin-bottom: 20px;

    .el-steps {
      padding: 20px;
    }
  }

  .detail-content {
    display: grid;
    gap: 20px;
  }

  .info-card {
    .card-title {
      font-size: 16px;
      font-weight: bold;
    }

    .payment-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  }

  :deep(.el-descriptions) {
    margin-bottom: 0;
  }

  :deep(.el-descriptions-item__label) {
    width: 120px;
    color: #606266;
  }

  :deep(.el-table) {
    margin-bottom: 0;
  }
}
</style>
